<template>
  <div id="contain">
      <div class="searchBox">
      <input type="text" class="inp" @keydown="goSearch" v-model="searchValue"/>
      <span class="sp" @click="goSearch"><i class="el-icon-search"></i></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: ''
    }
  },
  methods: {
    goSearch(){
      if (this.searchValue) {
        this.$router.push({path:'search',query:{text:this.searchValue}})
      }
    }
  },
};
</script>
<style  scoped>
.searchBox {
  width: 800px;
  height: 70px;
  margin: 4px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.inp {
  display: inline-block;
  width: 720px;
  height: 60px;
  border-radius: 5px;
  font-size: 18px;
  padding-left: 10px;
  border: 2px solid #ff9d00;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline:0;
}
.sp {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: #ff9d00;
  border-radius: 10%;
  text-align: center;
}
.el-icon-search {
  font-size: 30px;
  color: white;
  text-align: center;
  line-height: 60px;
}
</style>>
